<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>木兰花令·拟古决绝词</title>
    <style>
        div{
        text-align: center;
        }
        #wrap{
            width:900px;
            margin: 5px auto 0;
            border:2px solid purple;
            overflow: hidden;
        }
        #pic{
            width: 420px;
            height: 500px;
            background-image: url("D:\Vscode\web\图片1.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            float: left;
        }
        #text {
            background-image: url("D:\Vscode\web\图片1.png");
            background-repeat: repeat;
            background-size: cover;
            float: right;
            width: 420px;
            height: 500px;
            padding: 10px;
        }
        #title {
            font-family: '华文彩云','STCaiyun',cursive;
            font-size: 32px;
        }
        #author {
            font-size: 12px;
            font-family: '黑体','SimHei',sans-serif;
            text-align: right;
            margin-bottom: 24px;
        }
        #content p {
            font-family: '隶书','LiSu',serif;
            font-size: 24px;
            margin: 2px;
            letter-spacing: 0.5em;
            line-height: 1.5em;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="pic"></div>
        <div id="text">
            <div id="title">木兰花令，拟古决绝词</div>
            <div id="author">纳兰性德</div>
            <div id="content">
                <p>人生若只如初见，</p>
                <p>何事秋风悲画。</p>
                <p>等闲变却故人心，</p>
                <p>却道故心人易变。</p>
                <p>骊山雨罢清宵半，</p>
                <p>泪雨霖铃终不怨。</p>
                <p>何如薄幸锦衣郎，</p>
                <p>比翼连枝当日愿。</p>
            </div>
        </div>
    </div>
</body>
</html>